<template>
	<div class="settlement-page-layout">
		<div class="settlement-page-head-bar">
			<div class="settlement-page-head-bar-return-btn" @click="page_back">
				<b-icon-chevron-compact-left />
			</div>
			<div class="settlement-page-head-bar-title">购物车结算</div>
		</div>
		<div class="settlement-page-content">
			<b-card class="settlement-page-address" border-variant="light">
				<div class="settlement-page-address-flexbox">
					<div v-if="address.default == {} || address.default == null">
						<div class="settlement-page-no-address-content" @click="to_address_page">
							你还没有收货地址，点击去添加
						</div>
					</div>
					<div v-else>
						<div class="settlement-page-address-content">
							<div class="settlement-page-address-content-address">{{ address.default.address }}</div>
							<div class="settlement-page-address-content-name">{{ address.default.name }}</div>
							<div class="settlement-page-address-content-telphone">{{ address.default.tel }}</div>
						</div>
						<div class="settlement-page-address-btn" @click="set_address">
							<b-icon-pencil-square />
						</div>
					</div>
				</div>
			</b-card>
			<b-card border-variant="light">
				<div class="settlement-page-goods-list">
					<div class="settlement-page-goods" v-for="(goods, index) in cart" :key="index">
						<div class="settlement-page-goods-image">
							<img :src="goods.src + '!50'" />
						</div>
						<div class="settlement-page-goods-content">
							<p class="settlement-page-goods-name">
								{{ goods.name }} x <big>{{ goods.number }}</big>
							</p>
							<p class="settlement-page-goods-money">
								<small>￥</small> {{ (goods.number * goods.price).toFixed(2) }}
							</p>
						</div>
					</div>
				</div>
				<div class="settlement-page-item-remark">
					<b-form-input type="text" class="remark-input" placeholder="输入备注 (可选)" v-model="order.remark" />
				</div>
				<div class="settlement-page-item-foot">
					<div class="settlement-page-item-foot-total">
						合计：<span class="settlement-page-item-foot-money"><small>￥</small> {{ total.toFixed(2) }}</span>
					</div>
					<div class="settlement-page-item-foot-btn">
						<b-button size="sm" variant="primary" @click="submit_order">提交订单</b-button>
					</div>
				</div>
			</b-card>
		</div>
		<SetAddress v-bind.sync="address"/>
		<Payment v-bind.sync="order.payment" />
	</div>
</template>

<script>
	import {BIcon, BIconChevronCompactLeft, BIconPencilSquare} from 'bootstrap-vue'
	import SetAddress from '../Public/SetAddress.vue'
	import Payment from '../Public/Payment.vue'
	
	export default {
		data(){
			return {
				cart: [],
				total: 0,
				address: {
					show: false,
					list: [],
					default: null,
				},
				order: {
					remark: '',
					payment: {
						show: false,
						id: null,
						completed: false
					}
				}
			}
		},
		watch:{
			'order.payment.show'(val) {
				if(!val) {
					if(this.order.payment.completed) this.$router.back()
					else this.$router.push({name: 'me-orders', params: {type: 'wait_for_paid'}})
				}
			}
		},
		components:{
			SetAddress,
			Payment,
			BIcon,
			BIconChevronCompactLeft,
			BIconPencilSquare
		},
		mounted() {
			if(this.$route.params.cart == undefined) {
				this.$router.back()
				return
			}
			
			this.cart = this.$route.params.cart
			this.cart.forEach(item => {
				this.total += item.number * item.price
			})
			
			this.fetch_address()
		},
		methods: {
			page_back(){
				this.$router.back()
			},
			fetch_address(){
				this.$axios.get('/address/list').then(resp => {
					if(resp.ret == 0){
						this.address.list = resp.data
						
						this.address.list.forEach(item => {
							if(item.default) {
								this.address.default = item
								return
							}
						})
						
						if(this.address.default == null && this.address.list.length > 0) this.address.default = this.address.list[0]
						
						console.log(this.address.default)
					}
				})
			},
			to_address_page() {
				this.$router.push({path: '/me/address'})
			},
			set_address() {
				this.address.show = true
			},
			submit_order(){
				if(this.address.default == {} || this.address.default == null)
					this.$msg('请先选择一个收货地址')
				
				let cart_item = []
				this.cart.forEach(item => {
					cart_item.push({gid: item.id, spec_token: item.spec_token})
				})
				
				this.$axios.post('/order/settlement', {
					cart: cart_item,
					aid: this.address.default.id,
					remark: this.order.remark
				}).then(resp => {
					if(resp.ret == 0) {
						this.order.payment.id = resp.data
						this.order.payment.show = true
					}
				})
			},
		}
	}
</script>

<style>
	.settlement-page-layout {
		position: relative;
		padding-top: 3rem;
	}
	.settlement-page-head-bar {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 20;
		height: 3rem;
		background-color: #FFFFFF;
		border-bottom: 0.0625rem solid #EEEEEE;
	}
	.settlement-page-head-bar-return-btn {
		display: inline-block;
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		cursor: pointer;
	}
	.settlement-page-head-bar-title {
		display: inline-block;
		width: calc(100% - 3rem);
		padding-right: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		color: #666666;
	}
	.settlement-page-content {
		padding: 0.9375rem;
	}
	
	.settlement-page-address {
		margin-bottom: 0.9375rem;
	}
	.settlement-page-address-flexbox {
		
	}
	.settlement-page-address-flexbox>div {
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.settlement-page-no-address-content {
		text-align: center;
		color: #666
	}
	.settlement-page-address-content {
		width: calc(100% - 3rem);
	}
	.settlement-page-address-content-address {
		font-size: 1.25rem;
		margin-bottom: 0.9375rem;
	}
	.settlement-page-address-content-name, .settlement-page-address-content-telphone {
		display: inline-block;
		margin-right: 0.625rem;
		color: #666
	}
	.settlement-page-address-btn {
		width: 3rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		color: #666666;
		user-select: none;
		cursor: pointer;
	}
	
	.settlement-page-goods-list {
		clear: both;
	}
	.settlement-page-goods {
		display: flex;
		padding: 0.9375rem;
	}
	.settlement-page-goods-image {
		width: 3.125rem;
		height: 3.125rem;
		margin-right: 0.9375rem;
	}
	.settlement-page-goods-image img {
		width: 3.125rem;
		height: 3.125rem;
	}
	.settlement-page-goods-content {
		
	}
	.settlement-page-goods-content p {
		margin-bottom: 0;
	}
	.settlement-page-goods-name {
		font-size: 0.9375rem;
	}
	.settlement-page-goods-money {
		font-size: 1.0625rem;
		color: rgb(255, 78, 47)
	}
	
	.remark-input {
		border: 0;
		border-bottom: 1px solid #ced4da;
		border-radius: 0;
	}
	.remark-input:focus {
		border-color: #80bdff;
		box-shadow: none;
	}
	
	.settlement-page-item-foot {
		margin-top: 0.625rem;
		display: flex;
		align-items: center;
	}
	.settlement-page-item-foot-total {
		font-size: 0.9375rem;
		color: #666666;
	}
	.settlement-page-item-foot-money {
		font-size: 1.5625rem;
		color: rgb(255, 78, 47)
	}
	.settlement-page-item-foot-btn {
		position: absolute;
		right: 1.25rem;
	}
</style>
